<!-- 选择器 -->
<template>
    <div id="cm-selector">
        <div class="cm-selector-container" @click="showSelection()">
            <div class="cm-selection-rendered">
                <div class="cm-selected-value">{{ value }}</div>
            </div>
            <span class="cm-select-arrow">
                <svg class="icon cm-select-arrow-inner" aria-hidden="true" :class="{'arrow-spin':ifspin}">
                    <use xlink:href="#icon-cmjiantouarrow483"></use>
                </svg>
            </span>
        </div>
        <div class="cm-selection-container" v-if="selectionVis" :class="[ifpopup?'cm-selection-container-pop':'cm-selection-container-dis']" @mouseenter.once="changeFocus(-1)">
            <slot></slot><!--子组件中定义的插槽-->
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
        selectionVis:false,//下拉框是否显示
        ifpopup:false,//下拉框动画
        focusOption:-1,//当前选中的聚焦项，高亮项
        ifspin:false,//箭头旋转
    };
  },

  provide(){
      return {
          getSelected:()=>this.defaultSelection, //向cm-selector-option暴露当前选中条目
          getFocusOption:()=>this.focusOption   //向cm-selector-option暴露当前高亮项目
      }
  },



  props:[
      'defaultSelection',//选中条目
      'value'//选中条目显示值
  ],

  model:{
      prop: 'defaultSelection',
      event: 'changeSelection'
  },

  created(){
      this.focusOption = this.defaultSelection
  },

  components: {},

  computed: {
    
  },


  methods: {
      changeSelection(value){
          console.log(value)
          this.$emit('changeSelection',value)
            this.showSelection()
      },//更改父组件绑定的defaultSelection同时刷新当前组件内数据
      showSelection(){
          this.ifspin = !this.ifspin
          this.ifpopup = !this.ifpopup
          setTimeout(()=>{
              this.selectionVis = !this.selectionVis
          },250)
      },//展示可选条目
      changeFocus(value){
          this.focusOption = value;
      }//更改聚焦高亮项目
  },
  watch:{
    defaultSelection(newval){     
        console.log('defaultSelection:',newval)
    }
  }
}

</script>
<style>
#cm-selector{
    position: relative;
    width: 100%;
}
.cm-selector-container{
    position: relative;
    width: 100%;
    height: 30px;
    border-radius: 4px;
    border: 0.5px rgba(175, 175, 175, 0.83) solid;
    font-size: 14px;
    color: rgb(88, 88, 88);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    box-sizing: border-box;
    cursor: pointer;
}
.cm-selection-rendered{
    position: relative;
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
}
.cm-selected-value{
    float: left;
    max-width: 100%;
    height: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 30px;
}
.cm-select-arrow{
    position: absolute;
    right: 11px;
    height: 30px;
    width: 30px;
    text-align: right;
    line-height: 30px;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.cm-select-arrow-inner{
    color: rgb(88, 88, 88);
    position: absolute;
    right: 0;
    transition: all 0.5s;
}
.arrow-spin{
    transform: rotate(180deg);
    transform-origin: center;
    transition: all 0.3s;
}
.cm-selection-container{
    margin-top: 4px;
    position: relative;
    width: 100%;
    max-height: 400px;
    border-radius: 4px;
    font-size: 14px;
    color: rgb(88, 88, 88);
    box-shadow:0px 2px 7px #d1d1d1 ;
    background-color: white;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 10px 0;
    z-index: 1000;
}
.cm-selection-container-pop{
    animation: selector-option-popup 0.3s ease;
}
.cm-selection-container-dis{
    animation: selector-option-dis 0.3s ease;
}
@keyframes selector-option-popup {
    0%{
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top;
    }
    100%{
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top;
    }
}
@keyframes selector-option-dis {
    0%{
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top;
    }
    100%{
       opacity: 0;
        transform: scaleY(0);
        transform-origin: top;
    }
}
</style>